<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>QWork短址服务</title>
    <link rel="stylesheet" href="/static/css/bulma.min.css" />
    <script src="/static/js/clipboard.min.js"></script>
    <script src="/static/js/qrcode.min.js"></script>
</head>
<body>
<section class="hero">
    <div class="hero-body">
        <div class="container has-text-centered">
            <h1 class="title">
                短址服务
            </h1>
            <h2 class="subtitle">
                欢迎使用QWork短址服务
            </h2>
        </div>
    </div>
</section>

<section class="hero">
    <div class="hero-body">
        <div class="container has-text-centered">
            {{ if .ok }}
            <div style="margin: 2px auto;width: 128px;" id="qrcode"></div>
            <h3 style="line-height: 51px;background: #efefef;margin: 10px auto;color: #000;">{{ .result }}</h3>
            <a class="button is-primary button-copy" data-clipboard-text="{{ .result }}">复制</a>
            <script>
                var qrcode = new QRCode(document.getElementById("qrcode"), {
                    text: "{{ .result }}",
                    width: 128,
                    height: 128,
                    colorDark : "#000000",
                    colorLight : "#ffffff",
                    correctLevel : QRCode.CorrectLevel.H
                });
            </script>
            {{ else }}
            <p>失败</p>
            {{ end }}
        </div>
    </div>
</section>
<script>
var clipboard = new ClipboardJS('.button-copy');
</script>
</body>
</html>